/*
 * @Author: shimmer
 * @Date: 2022-04-23 08:41:23
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-04-25 14:49:45
 * @Description:
 *
 */
import React, {useEffect, useState, useRef, useMemo} from 'react';
import {useNavigate} from 'react-router-dom';
import './page.css';
import moment from 'moment';
import {FlexContainer, EditableVirtualTable} from '@gwaapp/ease';
import {Table, Input, Button, Select, InputNumber, DatePicker} from 'antd';
import datasource from './aa.json';

const APage = React.lazy(() => import('./reduxPage/APage'));
const BPage = React.lazy(() => import('./reduxPage/BPage'));
const CPage = React.lazy(() => import('./reduxPage/CPage'));
const Option = Select.Option;

const Cpp = (props) => {
    const navigate = useNavigate();
    // const datasource = [
    //     {
    //         deviceId: '111111',
    //         deviceName: 'deviceName',
    //         deviceModel: '123',
    //     },
    // ];

    const tableRef = useRef();
    const columns = useMemo(() => {
        return [
            {
                title: 'ID',
                dataIndex: 'Id',
                align: 'center',
                render: (text, record, index) => {
                    return index + 1;
                },
                width: 80,
            },
            {
                title: '班级',
                dataIndex: 'class',
                key: 'class',
                align: 'center',
                onCell: (_, index) => {
                    if (index === 2) {
                        return {rowSpan: 2};
                    }
                    if (index === 3) {
                        return {rowSpan: 0};
                    }
                    return {};
                    // if (index === 4) {
                    //   return { colSpan: 0 };
                    // }
                },
                canHide: false,
                width: 290,
            },
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                renderEdit: () => <Input />,
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your name',
                        },
                        // {
                        //   validator: (rule, value) => {
                        //     return new Promise((resolve, reject) => {
                        //       const { snapShoot } = tableRef.current.getFieldsValue();
                        //       const validateUnique = snapShoot.find((record) => record.name === value);
                        //       if (validateUnique) {
                        //         reject("姓名重复");
                        //         return;
                        //       }
                        //       resolve(value);
                        //     });
                        //   },
                        // },
                    ],
                },
                canHide: false,
                width: 300,
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
                renderEdit: () => <InputNumber controls={false} />,
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your age',
                        },
                    ],
                },
                dependence: ['name'],
                canHide: false,
                width: 380,
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
                render: (text, record, rowIndex, number) => {
                    if (text === 'male') return '男性';
                    if (text === 'female') return '女性';
                    return '';
                },
                renderEdit: () => (
                    <Select>
                        <Option value="male">男性</Option>
                        <Option value="female">女性</Option>
                    </Select>
                ),
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your sex',
                        },
                    ],
                },
                dependence: ['name'],
                editable: true,
                width: 80,
            },
            {
                title: '学号(不可重复)',
                dataIndex: 'number',
                key: 'number',
                width: 150,
                renderEdit: () => {
                    const {snapShoot} = tableRef.current.getFieldsValue();
                    const selectedNumbers = snapShoot.map((record) => record.number);
                    return (
                        <Select>
                            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 55, 66, 88, 77].map((number) => (
                                <Option key={number} value={number} disabled={selectedNumbers.includes(number)}>
                                    {number}
                                </Option>
                            ))}
                        </Select>
                    );
                },
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please select your number',
                        },
                    ],
                },
                dependence: ['name'],
            },
            {
                title: '开始日期',
                dataIndex: 'startDate',
                key: 'startDate',
                width: 200,
                renderEdit: ({text, record, rowIndex, editRecord}) => {
                    const endDate = editRecord['endDate'] ? editRecord['endDate'] : record['endDate'];
                    return (
                        // @ts-ignore
                        <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            disabledDate={(current) => current.isAfter(moment(endDate))}
                            showTime={true}
                        />
                    );
                },
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your startDate',
                        },
                    ],
                },
                dependence: ['name', 'endDate'],
                defaultValue: (record) => {
                    let start = moment(record.endDate || '1999-02-03');
                    start = start.subtract(1, 'd');
                    return start.format('YYYY-MM-DD HH:mm:ss');
                },
            },
            {
                title: '结束日期',
                dataIndex: 'endDate',
                key: 'endDate',
                renderEdit: ({text, record, rowIndex, editRecord}) => {
                    const startDate = editRecord['startDate'] ? editRecord['startDate'] : record['endDate'];
                    return (
                        // @ts-ignore
                        <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            disabledDate={(current) => current.isBefore(moment(startDate))}
                            showTime={true}
                        />
                    );
                },
                width: 200,
                formProps: {
                    rules: [
                        {
                            required: true,
                            message: 'Please input your endDate',
                        },
                    ],
                },
                dependence: ['name', 'startDate'],
                defaultValue: (record) => {
                    let end = moment(record.startDate || '1999-02-03');
                    end = end.subtract(-1, 'd');
                    return end.format('YYYY-MM-DD HH:mm:ss');
                },
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
                width: 200,
                renderEdit: () => (
                    <Input
                        onBlur={() => {
                            console.log('失去焦点');
                        }}
                        defaultValue={''}
                    />
                ),
                dependence: ['name'],
            },
            {
                title: '控制',
                dataIndex: 'control',
                width: 200,
                render: (text, record, rowIndex) => (
                    <>
                        <Button>新增</Button>
                        <Button>删除</Button>
                    </>
                ),
            },
        ];
    }, []);
    return (
        <React.Fragment>
            <React.Suspense fallback={<div>Loading...</div>}>
                <APage />
            </React.Suspense>
            <hr />
            <React.Suspense fallback={<div>Loading...</div>}>
                <BPage />
            </React.Suspense>
            <hr />
            <React.Suspense fallback={<div>Loading...</div>}>
                <CPage />
            </React.Suspense>
            <hr />

            <div style={{height: '300px', width: '100%', display: 'flex', flexDirection: 'column'}}>
                <FlexContainer direction="column">
                    <EditableVirtualTable bordered tableType="virtual" showIndex dataSource={datasource} columns={columns} />
                </FlexContainer>
            </div>
        </React.Fragment>
    );
};

export default Cpp;
